<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <style>
        .dialog{
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .5);
        }
        .add-dialog, .edit-dialog  {
            width: 600px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solidrgba(2, 83, 245, 0.333);
            background-color: rgb(228, 225, 222);
            margin-top: calc((100vh-300px)/2);
        }
        .title{
            text-align: center;
        }

        .ico {
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showAdd">添加用户</button>
        <div class="dialog" v-show="dialogFlag">

            <div class="add-dialog" v-show="addFlag">
                <h3 class="title">添加用户</h3>
                <p>
                    用户编号:
                    <input type="text" v-model="newUser.uid">
                </p>
                <p>
                    姓名:
                    <input type="text" v-model="newUser.uname">
                </p>
                <p>
                    年龄:
                    <input type="text" v-model="newUser.uage">
                </p>
                <p>
                    邮箱地址:
                    <input type="text" v-model="newUser.uemail">
                </p>
                <p>
                    联系电话:
                    <input type="text" v-model="newUser.uphone">
                </p >
                <p style="text-align:center">
                    <button @click="addData">确认添加</button>
                    <button @click="cancel">取消操作</button>
                </p>
            </div>

            <div class="edit-dialog" v-if="editIndex>=0">
                <h3 class="title">修改用户</h3>
                <p>
                    用户编号:
                    <input type="text" v-model="lists[editIndex].uid">
                </p>
                <p>
                    姓名:
                    <input type="text" v-model="lists[editIndex].uname">
                </p>
                <p>
                    年龄:
                    <input type="text" v-model="lists[editIndex].uage">
                </p>
                <p>
                    邮箱地址:
                    <input type="text" v-model="lists[editIndex].uemail">
                </p>
                <p>
                    联系电话:
                    <input type="text" v-model="lists[editIndex].uphone">
                </p >
                <p style="text-align:center">
                    <button @click="addData">确认修改</button>
                    <button @click="cancel">取消操作</button>
                </p>
            </div>

        </div>
        <table width="600" border="1">
            <tr>
                <th>用户编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱地址</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in lists" :key="index">
                <td>{{item.uid}}</td>
                <td>{{item.uname}}</td>
                <td>{{item.uage}}</td>
                <td>{{item.uemail}}</td>
                <td>{{item.uphone}}</td>
                <td>
                    <a @click="editData(index)">
                        <img src="./assets/upd.png" title="编辑" class="ico">
                    </a>
                    <a @click="deleteData(index)">
                        <img src="./assets/del.png" title="删除" class="ico">
                    </a>


                </td>
            </tr>
        </table>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                editFlag:false,
                editIndex:-1,
                dialogFlag:false,
                newUser: {
                    uid: '',
                    uname: '',
                    uage: '',
                    uemail: '',
                    uphone: '',
                },
                addFlag: false,
                lists: [
                    {
                        uid: '1001',
                        uname: "a",
                        uage: "11",
                        uemail: '1@1',
                        uphone: "123"
                    },
                    {
                        uid: '1002',
                        uname: "b",
                        uage: "11",
                        uemail: '1@1',
                        uphone: "123"
                    },
                    {
                        uid: '1003',
                        uage: "11",
                        uname: "c",
                        uemail: '1@1',
                        uphone: "123"
                    },
                    {
                        uid: '1004',
                        uname: "d",
                        uage: "11",
                        uemail: '1@1',
                        uphone: "123"
                    },
                    {
                        uid: '1005',
                        uname: "e",
                        uage: "11",
                        uemail: '1@1',
                        uphone: "123"
                    },
                ]
            },
            methods: {
                showAdd() {
                    this.newUser.uid = '';
                    this.newUser.uname = '';
                    this.newUser.uage = '';
                    this.newUser.umail = '';
                    this.newUser.uphone = '';
                    this.addFlag = true;
                    
                    this.dialogFlag=true;


                },
                addData() {
                    this.newUser.uid
                    this.lists.push(this.newUser)
                    this.cancel();

                },
                deleteData(index) {
                    if (confirm("确认删除数据")) {
                        // console.log(index);
                        this.lists.splice(index, 1);

                    }
                },
                cancel(){
                    this.addFlag = false;
                    this.dialogFlag = false;
                },
                editData(index){
                    this.editIndex=index;
                    this.dialogFlag = true;

                }
            }

        })
    </script>
</body>

</html>